<template>
    <el-card>
        <div class="title">
            <h1>{{ executorInfo.executorName }} <span class="status" :style="'background-color: ' + statusColor"></span>
            </h1>
            <small>{{ executorInfo.executorBaseName }}</small>
        </div>
        <div class="info">
            <div class="run">
                <div class="type">
                    <span class="icon"></span>
                    <span class="typeName">正在运行</span>
                </div>
                <div class="data">{{ executorInfo.executorRunningTaskNum }}</div>
            </div>
            <div class="totalNum">
                <div class="type">
                    <span class="icon"></span>
                    <span class="typeName">完成总数</span>
                </div>
                <div class="data">{{ executorInfo.executorTotalNum }}</div>
            </div>
            <div class="lastStartTime">
                <div class="type">
                    <span class="icon"></span>
                    <span class="typeName">最后运行时间</span>
                </div>
                <div class="data">{{ executorInfo.executorLastStartTime }}</div>
            </div>
        </div>
        <div class="controller">
            <el-time-picker
                v-model="schedulerTime"
                :picker-options="{
                  selectableRange: '00:00:00 - 23:59:59'
                }"
                value-format="HH:mm"
                placeholder="当前无定时任务"
                @change="schedulerTimeChange">
            </el-time-picker>
            <el-switch
                v-model="btnStatus"
                :active-color="statusColor"
                :inactive-color="statusColor"
                @change="btnChange"
                ref="btnELe"
            >
            </el-switch>
        </div>
        <div class="controller">
            <slot name="executorSelector"></slot>
        </div>
    </el-card>
</template>

<script>
export default {
    name: "Card",
    props: {
        executorInfo: {
            required: true
        }
    },
    data() {
        return {
            // 按钮开关状态及颜色
            btnStatus: true,
            statusColor: "",
            schedulerTime: ""
        }
    },
    methods: {
        btnChange() {
            // 暂停
            if (this.executorInfo.executorStatus.executorIsRunning && !this.executorInfo.executorStatus.blockPutTaskStatus) {
                let data = {
                    type: "pauseExecutor",
                    executorName: this.executorInfo.executorName
                }
                this.websocket.webSocketSend(data)
            }
            // 继续
            else if (this.executorInfo.executorStatus.executorIsRunning && this.executorInfo.executorStatus.blockPutTaskStatus) {
                let data = {
                    type: "startUpExecutor",
                    executorName: this.executorInfo.executorName
                }
                this.websocket.webSocketSend(data)
            }
            // 启动
            else {
                let data = {
                    type: "startExecutor",
                    executorName: this.executorInfo.executorName
                }
                this.websocket.webSocketSend(data)
            }
        },
        schedulerTimeChange() {
            // 添加定时任务
            if (this.schedulerTime) {
                let time = this.schedulerTime.split(":")
                let data = {
                    type: "addSchedulerJob",
                    executorName: this.executorInfo.executorName,
                    hour: time[0],
                    minute: time[1]
                }
                this.websocket.webSocketSend(data)
            }
            // 取消定时任务
            else {
                let data = {
                    type: "removeSchedulerJob",
                    executorName: this.executorInfo.executorName,
                }
                this.websocket.webSocketSend(data)
            }

        }
    },
    watch: {
        "executorInfo.executorStatus": {
            handler(newData, oldData) {
                if (this.executorInfo.executorStatus.executorIsRunning && !this.executorInfo.executorStatus.blockPutTaskStatus) {
                    this.statusColor = "#13ce66"
                    this.btnStatus = true
                } else if (this.executorInfo.executorStatus.executorIsRunning && this.executorInfo.executorStatus.blockPutTaskStatus) {
                    this.statusColor = "rgb(235, 129, 83)"
                    this.btnStatus = false
                } else {
                    this.statusColor = "#969ba0"
                    this.$nextTick(()=> {
                        this.btnStatus = false
                    })
                }
                this.$nextTick(()=> this.$refs.btnELe.setBackgroundColor())
            },
            deep: true,
            immediate: true
        },
        "executorInfo.schedulerJobTime": {
            handler(newData, oldData) {
                if (this.executorInfo.schedulerJobTime) {
                    this.schedulerTime = Object.values(this.executorInfo.schedulerJobTime).join(":")
                }
                else {
                    this.schedulerTime = ""
                }
            },
            immediate: true
        },
    },
    computed: {}
}
</script>

<style scoped>
.el-card {
    word-wrap: break-word;
    background-color: #fff;
    background-clip: border-box;
    border-radius: 0.75rem;
    padding: 0.5rem;
}

.title h1 {
    font-size: 20px;
    line-height: 1.5;
    white-space: nowrap;
}

.title small {
    font-size: 12px;
    color: #969ba0;
}

.title .status {
    display: inline-block;
    width: 15px;
    height: 15px;
    border-radius: 100%;
}

.info {
    margin: 15px 0;
}

.info div {
    display: flex;
    justify-content: space-between;
}

.info > div {
    margin-bottom: 0.5rem;
}

.info .type {
    align-items: center;
}

.info .typeName {
    font-size: 14px;
}

.info .icon {
    width: 15px;
    height: 15px;
    margin-right: 8px;
    border-radius: 100%;
}

.info .run .icon {
    background-color: rgb(96, 198, 149);
}

.info .totalNum .icon {
    background-color: rgb(68, 65, 222);
}
.info .lastStartTime .icon {
    background-color: rgb(235, 129, 83);
}
.controller {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}
</style>